
	

var redraw, g, renderer;

/* only do all this when document has finished loading (needed for RaphaelJS) */
window.onload = function() {
    
    var width = $(document).width() - 20;
    var height = $(document).height() - 60;
    
    g = new Graph();

    /* add a simple node */
    g.addNode("home");
    g.addNode("work");
    g.addNode("academic");
    
    g.addNode("Cross-cultural understanding");
     g.addNode("Critical-thinking and problem-solving");
      g.addNode("Creativity and innovation");
       g.addNode("Collaboration, teamwork and leadership");
        g.addNode("Cross-cultural understanding");
         g.addNode("Communication and media fluency");
          g.addNode("Computing and ICT fluency");
           g.addNode("Career and learning self-reliance");
           
    /* add a node with a customized label */
    //g.addNode("1", { label : "Frank" });
	
    /*
    g.addNode("id35", {
            label : "meat\nand\ngreed"
        });*/
    
   
    st = { directed: true, label : "Label",
            "label-style" : {
                "font-size": 24
            }
        };
    
    //g.addEdge("kiwi", "penguin", st);









    /* connect nodes with edges */
    g.addEdge("home", 'Cheese');
    g.addEdge("home", "Critical-thinking and problem-solving");
    g.addEdge("home", "Creativity and innovation");
    // g.addEdge("home", "Collaboration, teamwork and leadership");
    // g.addEdge("home", "Cross-cultural understanding");
    // g.addEdge("home", "Communication and media fluency");
    // g.addEdge("home", "Computing and ICT fluency");
    // g.addEdge("home", "Career and learning self-reliance");
    
    g.addEdge("Cross-cultural understanding", "lex title 1");
    g.addEdge("Critical-thinking and problem-solving", "lex title 2");
    g.addEdge("Creativity and innovation", "lex title 3");
        
    g.addEdge("work", "Cross-cultural understanding");
    g.addEdge("work", "Critical-thinking and problem-solving");
    g.addEdge("work", "Creativity and innovation");
    g.addEdge("work", "Collaboration, teamwork and leadership");
    g.addEdge("work", "Cross-cultural understanding");
    g.addEdge("work", "Communication and media fluency");
    g.addEdge("work", "Computing and ICT fluency");
    g.addEdge("work", "Career and learning self-reliance");
    
    g.addEdge("academic", "Cross-cultural understanding");
    g.addEdge("academic", "Critical-thinking and problem-solving");
    // g.addEdge("academic", "Creativity and innovation");
    // g.addEdge("academic", "Collaboration, teamwork and leadership");
    // g.addEdge("academic", "Cross-cultural understanding");
    // g.addEdge("academic", "Communication and media fluency");
    g.addEdge("academic", "Computing and ICT fluency");
    g.addEdge("academic", "Career and learning self-reliance");
    
    // g.addEdge("kiwi", "id35");
    // g.addEdge("kiwi", "tomato");

    /* a directed connection, using an arrow */
    //g.addEdge("cherry", "Frank", { directed : false } );
    
    var strokew = "stroke-width";
    /* customize the colors of that edge */
    //g.addEdge("kiwi", "tomato", { stroke : "#bfa" , fill : "no-fill", label : "Meat-to-Apple" });
    
    /* add an unknown node implicitly by adding an edge */
    //g.addEdge("strawberry", "apple");
    //g.addEdge("apple", "tomato2");

    //g.removeNode("1");

    /* layout the graph using the Spring layout implementation */
    var layouter = new Graph.Layout.Spring(g);
    
    /* draw the graph using the RaphaelJS draw implementation */
    renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
    
    redraw = function() {
        layouter.layout();
        renderer.draw();
    };
    hide = function(id) {
        g.nodes[id].hide();
    };
    show = function(id) {
        g.nodes[id].show();
        renderer.draw();
    };
    //    console.log(g.nodes["kiwi"]);

		var work = document.getElementById("work");
		work.style.fill = "blue";
		work.setAttribute("rx", 30);
		work.setAttribute("ry", 30);
		
		var home = document.getElementById("home");
		home.style.fill = "red";
		home.setAttribute("rx", 30);
		home.setAttribute("ry", 30);
  
  	var academic = document.getElementById("academic");
		academic.style.fill = "green";
		academic.setAttribute("rx", 30);
		academic.setAttribute("ry", 30);
};

